<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成都缘友社交网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/letter.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header>
	<nav class="navbar head-default" role="navigation">
	  <div class="container">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand disabled" href="#">成都缘友网</a>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="index.html">首页</a></li>
	        <li><a href="friends.html">我的交友</a></li>
	        <li><a href="people.html">附近的人</a></li>
	        <li><a href="photos.html">照片墙</a></li>
	      </ul>
	      <ul class="nav navbar-nav navbar-right">
	          <li><a href="login.html">登录</a></li>
	          <li><a href="sign.html">注册</a></li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /container -->
	</nav><!--导航结束-->
</header>
<main>
	<div class="container">
		<div class="row self-box">
			<div class="col-sm-9 pull-right">
				<ul class="nav nav-tabs">
				  <li role="presentation" class="active"><a href="javascript:void(0)" value="unread">未读私信</a></li>
				  <li role="presentation"><a href="javascript:void(0)" value="readed">已读私信</a></li>
				  <li role="presentation"><a href="javascript:void(0)" value="all">全部私信</a></li>
				</ul>
				<div class="unread" id="unread">
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀111111，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="14">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="13">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="12">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="11">回复</button>
							</div>
						</div>
					</div>
					<nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li class="active"><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>	
				</div>
				<div class="readed" id="readed">
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/3.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀222222222，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="10">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="0">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="1">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="2">回复</button>
							</div>
						</div>
					</div>
					<nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li class="active"><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>	

				</div>
				<div class="all" id="all">
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/1.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀3333333，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="3">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="4">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="5">回复</button>
							</div>
						</div>
					</div>
					<div class="letter-item">
						<div class="send-user">
							<img src="./images/2.jpg" alt="">
							<p><a href="#">详细信息</a></p>
						</div>
						<div class="letter-describe">
							<a href="#" class="send-userName">啦啦</a>
							<article>你好呀，可怜的卡卡卡卡卡卡卡卡卡卡卡卡卡</article>
							<div class="letter-bottom">
								<time>2017-07-9&nbsp;&nbsp;&nbsp;&nbsp;09:00</time>
								<button type="button" class="btn pull-right"  data-toggle="modal" data-target="#myModal" data-whatever="6">回复</button>
							</div>
						</div>
					</div>
					<nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li class="active"><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>	

				</div>
			</div>
			<div class="col-sm-3 pull-left">
				<p class="self-center">个人中心</p>
				<ul class="list-group self-lists">
					<li ><a href="self.html">个人资料</a></li>
					<li class="active"><a href="letter.html">我的私信</a></li>
					<li><a href="albums.html">我的相册</a></li>
					<li><a href="selfDynamic.html">我的动态</a></li>
					<li><a href="setting.html">账号设置</a></li>
				</ul>
			</div>
		</div>
	</div>
</main>
<footer>
	<div class="container">
		
    <p class="jy_link">
		<a href="http://jiaoyou.58.com/bj/">北京交友网</a>
        <a href="http://jiaoyou.58.com/sh/">上海交友网</a>
        <a href="http://jiaoyou.58.com/tj/">天津交友网</a>
        <a href="http://jiaoyou.58.com/gz/">广州交友网</a>
        <a href="http://jiaoyou.58.com/zz/">郑州交友网</a>
        <a href="http://jiaoyou.58.com/xa/">西安交友网</a>
        <a href="http://jiaoyou.58.com/sz/">深圳交友网</a>
        <a href="http://jiaoyou.58.com/su/">苏州交友网</a>
        <a href="http://jiaoyou.58.com/cq/">重庆交友网</a>
        <a href="http://jiaoyou.58.com/wh/">武汉交友网</a>
        <a href="http://jiaoyou.58.com/nj/">南京交友网</a>
        <a href="http://jiaoyou.58.com/hz/">杭州交友网</a>
        <a href="http://jiaoyou.58.com/cd/">成都交友网</a>
        <a href="http://jiaoyou.58.com/hrb/">哈尔滨交友网</a>	
        <a href="http://jiaoyou.58.com/cc/">长春交友网</a>
        <a href="http://jiaoyou.58.com/sjz/">石家庄交友网</a>	
        <a href="http://jiaoyou.58.com/jn/">济南交友网</a>
        <a href="http://jiaoyou.58.com/ty/">太原交友网</a>
        <a href="http://jiaoyou.58.com/fz/">福州交友网</a>
        <a href="http://jiaoyou.58.com/nc/">南昌交友网</a>
        <a href="http://jiaoyou.58.com/city/">更多交友网</a>
	</p>
	<p>Copyright (C) 2017 All Rights Reserved. 项目六组 版权所有</p>
	</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">回复</h4>
      </div>
      <div class="modal-body">
        <textarea name="letter" id="" rows="5"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left">清空</button>
        <button type="button" class="btn pull-right">发送</button>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/letter.js"></script>
<script src="js/common.js"></script>
</script> 
</body>
</html>